<!--  -->
<template>
  <div class="component-membershipLevel" :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div class="membershipLevel html-box">
      <div class="flex t-l" style="padding-bottom: 10px;align-items: center;">
        <div style="flex: 1;margin-right: 6px;">
          <div class="level_color" style="display: contents;font-weight: bold;line-height: 22px;">{{ current_level.level_name || "--" }}</div>
          <div class="validity_color" style="display: inline-block;" v-if="datas.isValidity && current_level.validity_time"> ({{ current_level.validity_time }}到期)</div>
        </div>
        <div class="growth_color" v-if="condition && condition.need">成长值 {{ condition.now }}/{{ condition.need }} {{ condition.type_name }}</div>
      </div>
      <div class="flex icon-box dashed" v-if="datas.list && datas.list.length > 0">
        <div class="icon-item flex" v-for="item in datas.list" :key="item.id" @click.stop="toUrl(item.h5_link)"><img :src="item.image" alt="" /> {{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const {
      preview_color,
      module_bgcolor,
      padding_top,
      padding_bottom,
      padding_left,
      padding_right,
      border_radius,
      level_color,
      level_size,
      growth_color,
      growth_size,
      validity_color,
      validity_size,
      icon_color,
      icon_size
    } = this.datas;

    return `
      .component-${this.id}{
          background-color: ${preview_color.color};
          background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          padding-top: ${padding_top}px;
          padding-bottom: ${padding_bottom}px;
          padding-left: ${padding_left}px;
          padding-right: ${padding_right}px;
      }
      .component-${this.id} .html-box {
          background-color: ${module_bgcolor.color};
          background-image: url(${module_bgcolor.isColor == 2 ? module_bgcolor.image : ""});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: ${border_radius}px;
      }
      .component-${this.id} .html-box .level_color{
        color: ${level_color};
        font-size: ${level_size}px;
      }
      .component-${this.id} .html-box .growth_color{
        color: ${growth_color};
        font-size: ${growth_size}px;
      }
      .component-${this.id} .html-box .validity_color{
        margin-left: 4px;
        color: ${validity_color};
        font-size: ${validity_size}px;
      }
      .component-${this.id} .html-box .icon-box{
        color: ${icon_color};
        font-size: ${icon_size}px;
      }
  `;
  }
};

export default {
  props: ["id", "datas"],
  data() {
    return {
      current_level: {},
      condition: {}
    };
  },

  activated() {},

  components: {},

  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },

  created() {
    this.getData();
  },

  methods: {
    async getData() {
      let { msg, result, data } = await $http.get("member.member.decorateMemberLevel", {}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      this.current_level = data.current_level;
      this.condition = data.condition;
    },
    toUrl(url) {
      window.location.href = url;
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
/* packageG/mycomponent/membershipLevel/membershipLevel.wxss */
.flex {
  display: flex;
}
.membershipLevel {
  padding: 10px 12px;
}
.membershipLevel .dashed {
  border-top: 1px dashed #fff;
}
.icon-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}
.icon-item {
  text-align: center;
  padding-top: 8px;
}
.icon-item img {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 4px;
  object-fit: contain;
}
</style>
